<template>
  <div>
    <h2>经营概览</h2>
    <div id="chart_example">
    </div>
  </div>
</template>
 
<script> 
  import echarts from 'echarts'
  export default {
    data() {
      return {}
    },
    mounted() {
      let this_ = this;
      let myChart = echarts.init(document.getElementById('chart_example'));

var builderJson = {

  "charts": {
    "一月收入": 93237,
    "二月收入": 82164,
    "三月收入": 97561,
    "四月收入": 77778,
    "五月收入": 87355,
    "六月收入": 62405,
    "七月收入": 91842,
    "八月收入": 92090,
    "九月收入": 91762,
    "十月收入": 81593,
    "十一月收入": 62060,
    "十二月收入": 91537,
   
  },
  "components": {
    "一月支出": 23237,
    "二月支出": 32164,
    "三月支出": 37561,
    "四月支出": 27778,
    "五月支出": 37355,
    "六月支出": 22405,
    "七月支出": 31842,
    "八月支出": 32090,
    "九月支出": 31762,
    "十月支出": 31593,
    "十一月支出": 22060,
    "十二月支出": 31537,
  },
  "ie": 9743
};

var downloadJson = {
  "男性会员": 17365,
  "女性会员": 4079,

};

var themeJson = {
  "糖醋排骨": 1594,
  "麻婆豆腐": 925,
  "酱香肉丝": 1608,
  "土豆丝": 721,
  "酸菜鱼": 2179,
  "红烧肉": 1982,
  "回锅肉": 3982
};

var waterMarkText = '';

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);



      let option = {
         backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'repeat'
    },
    tooltip: {},
    title: [{
        text: '经营收支',
        // subtext: '总计 ' + builderJson.all,
        left: '25%',
        textAlign: 'center'
    }, {
        text: '会员数据',
        // subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
        //     return all + downloadJson[key];
        // }, 0),
        left: '75%',
        textAlign: 'center'
    }, {
        text: '最受欢迎菜品',
        // subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
        //     return all + themeJson[key];
        // }, 0),
        left: '75%',
        top: '50%',
        textAlign: 'center'
    }],
    grid: [{
        top: 50,
        width: '50%',
        bottom: '45%',
        left: 10,
        containLabel: true
    }, {
        top: '55%',
        width: '50%',
        bottom: 0,
        left: 10,
        containLabel: true
    }],
    xAxis: [{
        type: 'value',
        max: builderJson.all,
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        max: builderJson.all,
        gridIndex: 1,
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
        data: Object.keys(builderJson.charts),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        splitLine: {
            show: false
        }
    }, {
        gridIndex: 1,
        type: 'category',
        data: Object.keys(builderJson.components),
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        type: 'bar',
        stack: 'chart',
        z: 3,
        label: {
            normal: {
                position: 'right',
                show: true
            }
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'chart',
        silent: true,
        itemStyle: {
            normal: {
                color: '#eee'
            }
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        xAxisIndex: 1,
        yAxisIndex: 1,
        z: 3,
        label: {
            normal: {
                position: 'right',
                show: true
            }
        },
        data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.components[key];
        })
    }, {
        type: 'bar',
        stack: 'component',
        silent: true,
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
            normal: {
                color: '#eee'
            }
        },
        data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.all - builderJson.components[key];
        })
    }, {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '25%'],
        data: Object.keys(downloadJson).map(function (key) {
            return {
                name: key.replace('.js', ''),
                value: downloadJson[key]
            }
        })
    }, {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '75%'],
        data: Object.keys(themeJson).map(function (key) {
            return {
                name: key.replace('.js', ''),
                value: themeJson[key]
            };
        })
    }]
};
    myChart.setOption(option);

      window.addEventListener('resize',function() {myChart.resize()});
    },
    methods: {},
    watch: {},
    created() {
 
    }
  }
</script>
<style scoped>
  h2{
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
  #chart_example{
    width: 1600px;
    height: 600px;
    margin: 0 auto;
  }
</style> 

